<template>
  <div class="transverse">
    <img :src="image" alt="" ref="image" />
    <div class="content" :style="{ marginLeft: marginLeft }">
      <span class="title" ref="title">{{ name }}</span>
      <span class="number" ref="number">{{ value }}</span>
    </div>
  </div>
</template>

<script>
import setRem from "@/utils/px2remref";
export default {
  components: {},
  props: {
    name: {
      type: String,
      default: "标题",
    },
    value: {
      type: [String, Number],
      default: "111",
    },
    width: {
      type: [String, Number],
      default: "100",
    },
    marginLeft: {
      type: [String, Number],
      default: "",
    },
    height: {
      type: [String, Number],
      default: "105",
    },
    image: {
      type: String,
      default: require("@/assets/images/index/icon_1@2x.png"),
    },
    fontSize: {
      type: [String, Number],
      default: "21",
    },
  },

  created() {},
  mounted() {
    this.initStyle();
  },
  methods: {
    initStyle() {
      this.$nextTick(() => {
        this.$refs.image.style.width =
          (Number(this.width) * setRem()) / 16 + "px";
        this.$refs.image.style.height =
          (Number(this.height) * setRem()) / 16 + "px";
        // this.$refs.title.style.marginTop =
        //   (Number(this.marginTop) * setRem()) / 16 + "px";
        // this.$refs.title.style.marginLeft = -this.name.length + "px";
        this.$refs.number.style.fontSize =
          (Number(this.fontSize) * setRem()) / 16 + "px";
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.transverse {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;

  .content {
    display: flex;
    flex-direction: column;
    /* margin-left: 10px; */
    justify-content: center;
    align-items: flex-start;
    .title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #cfeefc;
      line-height: 24px;
      // transform:scale(0.85) ;
    //   margin-left: -5px;
    }

    .number {
      /* font-size: 21px; */
      font-family: Furore, Furore-mk-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      line-height: 24px;
      letter-spacing: 1.32px;
    }
  }
}
</style>